<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="short icon" href="../favicon.ico">
    <!-- Import style -->
    <link rel="stylesheet" href="../libs/element-plus-2.4.2/index.css"/>
    <link rel="stylesheet" href="../style/home.css">
    <link rel="stylesheet" href="../style/common/style.css">
    <!-- Import Vue 3 -->
    <%--    <script src="//unpkg.com/vue@3"></script>--%>
    <script src="../libs/vue-3.37/vue.global.js"></script>
    <script src="../libs/element-plus-2.4.2/zh-cn.js"></script>
    <script src="../libs/element-plus-2.4.2/index.iife.min.js"></script>
    <!-- Import component library -->
    <script src="../libs/element-plus-2.4.2/index.full.js"></script>
    <title>图书管理系统</title>
</head>
<body>
<div id="app">
    <div class="root">
        <div class="container">
            <div class="sidebar">
                <el-scrollbar height="100vh">
                    <el-menu
                            class="menu"
                            default-active="bookTable"
                            :collapse="isCollapse"
                    >
                        <div class="logo">
                            <el-icon :size="isCollapse?48:80">
                                <svg t="1699434029882" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                     xmlns="http://www.w3.org/2000/svg" p-id="6301" width="200" height="200">
                                    <path d="M830.850299 316.434767h33.445836c11.334422 0 20.624932 9.197605 20.624932 20.624932V1003.375068c0 11.334422-9.197605 20.624932-20.624932 20.624932H357.405915c-24.898567 0-48.682272-9.29051-67.077481-26.199238-18.209399-16.815823-29.450916-39.577572-31.680639-64.104518l-0.18581-1.951007-0.55743-1.858102c-0.557431-1.951007-0.929051-3.902014-0.929051-5.945927V257.625839"
                                          fill="#46A3FB" p-id="6302"></path>
                                    <path d="M318.943205 199.281437c-1.486482 0.278715-2.972963 0.464525-4.459445 0.464526-31.959354 0-57.879877 26.013428-57.879877 57.879876s26.013428 57.879877 57.879877 57.879877c1.486482 0 2.880058 0.18581 4.273634 0.464525l1.951007 0.371621h507.07603V198.816912H320.894212l-1.951007 0.464525z"
                                          fill="#1B8CEA" p-id="6303"></path>
                                    <path d="M169.365995 206.156414a12.449283 2.322627 90 1 0 4.645255 0 12.449283 2.322627 90 1 0-4.645255 0Z"
                                          fill="#88DCE2" p-id="6304"></path>
                                    <path d="M180.450453 204.631942a12.449283 2.322627 60 1 0 4.022908-2.322628 12.449283 2.322627 60 1 0-4.022908 2.322628Z"
                                          fill="#88DCE2" p-id="6305"></path>
                                    <path d="M189.315972 197.800313a12.449283 2.322627 30 1 0 2.322627-4.022909 12.449283 2.322627 30 1 0-2.322627 4.022909Z"
                                          fill="#88DCE2" p-id="6306"></path>
                                    <path d="M181.164943 185.066957a12.449283 2.322627 0 1 0 24.898566 0 12.449283 2.322627 0 1 0-24.898566 0Z"
                                          fill="#88DCE2" p-id="6307"></path>
                                    <path d="M180.147689 180.487273a2.322627 12.449283 60 1 0 21.562791-12.449283 2.322627 12.449283 60 1 0-21.562791 12.449283Z"
                                          fill="#88DCE2" p-id="6308"></path>
                                    <path d="M176.874986 177.049535a2.322627 12.449283 30 1 0 12.449283-21.562791 2.322627 12.449283 30 1 0-12.449283 21.562791Z"
                                          fill="#88DCE2" p-id="6309"></path>
                                    <path d="M170.109236 163.141354a12.449283 2.322627 90 1 0 4.645255 0 12.449283 2.322627 90 1 0-4.645255 0Z"
                                          fill="#88DCE2" p-id="6310"></path>
                                    <path d="M159.62964 167.003096a12.449283 2.322627 60 1 0 4.022909-2.322627 12.449283 2.322627 60 1 0-4.022909 2.322627Z"
                                          fill="#88DCE2" p-id="6311"></path>
                                    <path d="M152.463242 175.577258a12.449283 2.322627 30 1 0 2.322627-4.022909 12.449283 2.322627 30 1 0-2.322627 4.022909Z"
                                          fill="#88DCE2" p-id="6312"></path>
                                    <path d="M138.149882 184.323716a12.449283 2.322627 0 1 0 24.898567 0 12.449283 2.322627 0 1 0-24.898567 0Z"
                                          fill="#88DCE2" p-id="6313"></path>
                                    <path d="M142.518968 201.308551a2.322627 12.449283 60 1 0 21.562791-12.449284 2.322627 12.449283 60 1 0-21.562791 12.449284Z"
                                          fill="#88DCE2" p-id="6314"></path>
                                    <path d="M154.778037 213.868723a2.322627 12.449283 30 1 0 12.449283-21.562791 2.322627 12.449283 30 1 0-12.449283 21.562791Z"
                                          fill="#88DCE2" p-id="6315"></path>
                                    <path d="M570.901833 127.930321m-15.050626 0a15.050626 15.050626 0 1 0 30.101252 0 15.050626 15.050626 0 1 0-30.101252 0Z"
                                          fill="#EF8218" p-id="6316"></path>
                                    <path d="M257.068409 104.425331m-15.050626 0a15.050626 15.050626 0 1 0 30.101252 0 15.050626 15.050626 0 1 0-30.101252 0Z"
                                          fill="#F36797" p-id="6317"></path>
                                    <path d="M353.503901 17.187443c21.089457 0 38.276901 17.001633 38.276901 37.905281s-17.187443 37.90528-38.276901 37.90528c-21.089457 0-38.276901-17.001633-38.2769-37.90528s17.187443-37.90528 38.2769-37.905281z m0 65.869715c15.515152 0 28.150245-12.542188 28.150245-27.871529s-12.635093-27.87153-28.150245-27.87153c-15.515152 0-28.150245 12.542188-28.150245 27.87153s12.635093 27.87153 28.150245 27.871529z"
                                          fill="#E62A52" p-id="6318"></path>
                                    <path d="M487.101433 84.35783c1.393576-3.251678 0.650336-6.782072-1.765196-7.804029l-46.63836-20.067501c-2.415533-1.021956-5.481401 0.743241-6.874977 3.994919s-0.650336 6.782072 1.765197 7.804029l46.638359 20.067501c2.322627 1.114861 5.388496-0.743241 6.874977-3.994919z"
                                          fill="#DAB647" p-id="6319"></path>
                                    <path d="M471.307567 44.873163c-3.251678-1.393576-6.782072-0.650336-7.804029 1.765197l-20.067501 46.638359c-1.021956 2.415533 0.743241 5.481401 3.994919 6.874978s6.782072 0.650336 7.804029-1.765197l20.067501-46.63836c1.114861-2.415533-0.650336-5.481401-3.994919-6.874977z"
                                          fill="#DAB647" p-id="6320"></path>
                                    <path d="M232.355652 417.236799c-7.711123 0-13.935765-6.224642-13.935765-13.935765V232.913083c0-7.711123 6.224642-13.935765 13.935765-13.935765s13.935765 6.224642 13.935765 13.935765v170.387951c0 7.711123-6.224642 13.935765-13.935765 13.935765z"
                                          fill="" p-id="6321"></path>
                                    <path d="M232.355652 624.229359c-7.711123 0-13.935765-6.224642-13.935765-13.935764v-130.99619c0-7.711123 6.224642-13.935765 13.935765-13.935765s13.935765 6.224642 13.935765 13.935765v130.99619c0 7.711123-6.224642 13.935765-13.935765 13.935764z"
                                          fill="" p-id="6322"></path>
                                    <path d="M314.762475 475.581201c-7.711123 0-13.935765-6.224642-13.935765-13.935765v-61.967701c0-7.711123 6.224642-13.935765 13.935765-13.935764s13.935765 6.224642 13.935765 13.935764v61.967701c0 7.711123-6.224642 13.935765-13.935765 13.935765z"
                                          fill="#FFFFFF" p-id="6323"></path>
                                    <path d="M314.762475 658.139721c-7.711123 0-13.935765-6.224642-13.935765-13.935765v-130.99619c0-7.711123 6.224642-13.935765 13.935765-13.935765s13.935765 6.224642 13.935765 13.935765v130.99619c0 7.711123-6.224642 13.935765-13.935765 13.935765z"
                                          fill="#FFFFFF" p-id="6324"></path>
                                    <path d="M332.600254 1013.130103c-28.42896 0-55.557249-10.591181-76.460896-29.915441-20.810742-19.13845-33.631646-45.151878-36.140084-73.116313v-0.464526l-0.092905-0.464525c-1.021956-3.251678-1.486482-6.596262-1.486482-10.033751V721.872618c0-7.711123 6.224642-13.935765 13.935765-13.935764s13.935765 6.224642 13.935765 13.935764v177.355834c0 0.650336 0.092905 1.300671 0.278715 1.951007l1.021957 3.251679 0.278715 3.344583c1.858102 21.089457 11.520232 40.599528 27.221194 55.092724 15.700962 14.493195 36.140083 22.483034 57.508256 22.483034h506.983125c3.716204 0 6.689167-2.972963 6.689167-6.689167v-114.273272c0-7.711123 6.224642-13.935765 13.935765-13.935765s13.935765 6.224642 13.935764 13.935765v114.273272c0 19.045545-15.515152 34.560697-34.560696 34.560697H333.900925c-0.557431-0.092905-0.929051-0.092905-1.300671-0.092906z"
                                          fill="" p-id="6325"></path>
                                    <path d="M860.115406 759.963709c-7.711123 0-13.935765-6.224642-13.935765-13.935765V312.346942c0-3.716204-2.972963-6.689167-6.689167-6.689167h-33.445836c-7.711123 0-13.935765-6.224642-13.935765-13.935764s6.224642-13.935765 13.935765-13.935765h33.445836c19.045545 0 34.560697 15.515152 34.560696 34.560696V746.027944c0 7.711123-6.224642 13.935765-13.935764 13.935765z"
                                          fill="" p-id="6326"></path>
                                    <path d="M817.00744 305.657775H294.416258l-3.344583-0.74324c-0.464525-0.092905-0.929051-0.18581-1.393577-0.185811-39.577572 0-71.815641-32.238069-71.815641-71.815641 0-39.577572 32.238069-71.815641 71.815641-71.815642 0.464525 0 0.929051-0.092905 1.486482-0.18581l3.437489-0.743241h522.312466V305.657775zM297.389222 277.786246h491.653783v-89.746326H297.667937l-0.464526 0.092905c-2.415533 0.557431-4.92397 0.836146-7.432408 0.836146-24.248231 0-43.944112 19.695881-43.944111 43.944112 0 24.248231 19.695881 43.944112 43.944111 43.944112 2.415533 0 4.831065 0.278715 7.153693 0.74324l0.464526 0.185811z"
                                          fill="" p-id="6327"></path>
                                </svg>
                            </el-icon>
                            <div>
                                <el-link href="#" @click="handleLoginTips">
                                    {{isCollapse?"欢迎~":`当前用户为${username||'非法闯入'}`}}
                                </el-link>
                            </div>
                        </div>
                        <el-divider class="divider"></el-divider>
                        <el-menu-item index="bookTable">
                            <el-icon>
                                <Edit/>
                            </el-icon>
                            <template #title>管理图书</template>
                        </el-menu-item>
                        <el-menu-item index="exit" class="logout" @click="handleExit">
                            <el-icon>
                                <House/>
                            </el-icon>
                            <template #title>退出登录</template>
                        </el-menu-item>

                    </el-menu>
                </el-scrollbar>
            </div>
            <div class="content" :class="{active:isCollapse}">
                <div class="option-box">
                    <div class="left-btn-box">
                        <div class="menu-btn-box" @click="handleCollapse">
                            <el-icon :size="32" v-if="!isCollapse" color="#909399">
                                <Fold/>
                            </el-icon>
                            <el-icon :size="32" v-else color="#909399">
                                <Expand/>
                            </el-icon>
                        </div>
                        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
                        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleEdit">修改
                        </el-button>
                        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">
                            删除
                        </el-button>
                    </div>
                    <div class="right-btn-box">
                        <el-input class="search-input" v-model="params.name" placeholder="搜索请输入书名" clearable
                                  @keyup.enter.native="handleSearch"></el-input>
                        <el-button icon="Bell" circle @click="handleTips"></el-button>
                        <el-button icon="Refresh" circle @click="handleRefresh"></el-button>
                    </div>
                </div>
                <el-divider class="btn-divider"></el-divider>
                <div>

                    <el-table :data="tableData" stripe style="width: 100%" v-loading="isLoading"
                              empty-text="未查询到该书籍的信息..."
                              @selection-change="handleSelectionChange">
                        <el-table-column type="selection" min-width="40" align="center"></el-table-column>
                        <el-table-column prop="name" label="书名" min-width="120"
                                         align="center"></el-table-column>
                        <el-table-column prop="quantity" label="数量" min-width="120"
                                         align="center"></el-table-column>
                        <el-table-column prop="price" label="价格" min-width="120"
                                         align="center"></el-table-column>
                        <el-table-column prop="coverImg" label="封面" min-width="120" align="center">
                            <template #default="scope">
                                <el-image :src="scope.row.coverImg" class="bookImage">
                                    <template #error v-if="!scope.row.coverImg">
                                        <el-image
                                                src="../images/errorLoading.png"></el-image>
                                        <%--                                        <div class="el-image__error">未添加封面图片</div>--%>
                                    </template>
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="author" label="作者" min-width="120"
                                         align="center"></el-table-column>
                        <el-table-column prop="uploader" label="上传者" min-width="120"
                                         align="center"></el-table-column>
                        <el-table-column prop="uploader" label="操作" min-width="120" align="center">
                            <template #default="scope">
                                <el-button link type="primary" @click="handleEdit(scope.row)">修改</el-button>
                                <el-button link type="primary" @click="handleDelete(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <el-dialog v-model="open" :title="title" width="30%" class="form-dialog" align-center>
                        <div>
                            <el-form :model="form" label-width="120px" :rules="formRules" ref="formRef"
                                     label-position="left">
                                <el-form-item label="书籍号" prop="id">
                                    <el-input v-model="form.id" placeholder="自动生成,不可更改." disabled/>
                                </el-form-item>
                                <el-form-item label="书名" prop="name">
                                    <el-input v-model="form.name" placeholder="请输入书名"/>
                                </el-form-item>
                                <el-form-item label="价格" prop="price">
                                    <el-input v-model="form.price" placeholder="请输入价格" type="number"/>
                                </el-form-item>
                                <el-form-item label="数量" prop="quantity">
                                    <el-input v-model="form.quantity" placeholder="请输入数量" type="number"/>
                                </el-form-item>
                                <el-form-item label="封面图片" prop="coverImg">
                                    <el-upload class="coverImg-uploader" action="#" ref="uploadRef"
                                               :show-file-list="true"
                                               list-type="picture-card" :on-change="handleChange"
                                               :on-preview="handlePictureCardPreview"
                                               :auto-upload="false" :file-list="uploadFiles" :limit="2">
                                        <template #tip>
                                            <div class="el-upload__tip">
                                                仅支持JPG、PNG格式，文件小于2M。
                                            </div>
                                        </template>
                                        <el-icon class="avatar-uploader-icon">
                                            <Plus/>
                                        </el-icon>
                                    </el-upload>
                                    <el-dialog v-model="dialogVisible" align-center width="40%"
                                               :show-close="true" class="preview-dialog">
                                        <img :src="dialogImageUrl" alt="预览图" class="preview-img"/>
                                    </el-dialog>
                                </el-form-item>
                                <el-form-item label="作者名" prop="author">
                                    <el-input v-model="form.author" placeholder="请输入作者名"/>
                                </el-form-item>
                                <el-form-item label="是否匿名" prop="uploader">
                                    <el-radio-group v-model="form.uploader">
                                        <el-radio label="匿名" size="large">是</el-radio>
                                        <el-radio :label="username" size="large">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-form>
                        </div>
                        <template #footer>
                              <span class="dialog-footer">
                                <el-button @click="cancel">取消</el-button>
                                <el-button type="primary" @click="submit">
                                  确认
                                </el-button>
                              </span>
                        </template>
                    </el-dialog>

                    <el-pagination class="pagination" v-show="total > 0" :total="total" v-model:page="params.pageNum"
                                   v-model:limit="params.pageCount" @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :page-sizes="[10,20,30,40]" layout="->,sizes, prev, pager, next,total" background/>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="module">
    import {pajax} from "../utils/ajax.js";

    const {Loading, Plus, House, Expand, Fold, Delete, Edit, Bell, Search, Refresh} = ElementPlusIconsVue
    const {ElMessage, ElMessageBox, ElNotification} = ElementPlus
    const {createApp, ref, onMounted} = Vue
    const App = {
        setup() {
            const formData = new FormData()
            const username = ref()
            const msg = ref()
            const isLoading = ref(true)
            const tableData = ref([])
            const isCollapse = ref(false)
            const single = ref(true)
            const singleSelection = ref()
            const multiple = ref(true)
            const ids = ref([])
            const open = ref(true)
            const title = ref()
            const total = ref(NaN)
            const params = ref({
                name: "",
                pageNum: 1,
                pageCount: 10
            })
            const formRef = ref()
            const form = ref({
                id: null,
                name: null,
                price: null,
                quantity: null,
                coverImg: null,
                author: null,
                uploader: "匿名",
            })
            // const numberValidate = (rule, value, callback) => {
            //     console.log(rule)
            //     if (rule.field === "price" && (value === null || value === "")) {
            //         callback(new Error("请输入价格"))
            //         if (parseInt(value) === NaN) {
            //             callback(new Error("输入内容只能是数字"))
            //         }
            //     } else if (rule.field === "quantity" && (value === null || value === "")) {
            //         callback(new Error("请输入数量"))
            //         if (parseFloat(value) === NaN) {
            //             callback(new Error("输入内容只能是整数数字"))
            //         }
            //     }
            // }
            const formRules = {
                name: [{required: true, message: "请输入书名", trigger: "blur"}],
                price: [{required: true, message: "请输入价格", trigger: "blur"}],
                quantity: [{required: true, message: "请输入数量", trigger: "blur"}],
                author: [{required: true, message: "请输入作者名", trigger: "blur"}],
                upload: [{required: true, message: "请选择是否匿名", trigger: "blur"}],
            }
            const uploadRef = ref()
            const uploadFiles = ref()
            const dialogImageUrl = ref('')
            const dialogVisible = ref(false)
            const handleLoginTips = () => {
                ElNotification({
                    title: '提示',
                    message: `欢迎${username.value}登入系统!`,
                    type: 'success',
                })
            }
            const handleCollapse = () => {
                isCollapse.value = !isCollapse.value
            }
            const getUserInfo = () => {
                pajax({
                    url: "../userInfo",
                    method: "GET",
                })
                    .then(res => {
                        if (res.code) {
                            username.value = res.data[0]
                            msg.value = res.data[1]
                            handleLoginTips()
                        } else {
                            ElMessage.error(res.msg)
                            setTimeout(() => location.href = "../", 500)
                        }
                    })
            }
            const getBookList = () => {
                pajax({
                    url: "../bookList",
                    method: "GET",
                    params: params.value
                })
                    .then(res => {
                        if (res.code) {
                            tableData.value = res.data.bookList
                            total.value = res.data.count
                            isLoading.value = false
                        } else {
                            ElMessage.error(res.msg)
                        }
                    })
                    .catch(err => {
                        ElMessage.error(err)
                        console.log(err)
                    })

            }
            const handleSizeChange = (val) => {
                isLoading.value = true
                params.value.pageCount = val
                setTimeout(() => getBookList(), 500)
            }
            const handleCurrentChange = (val) => {
                isLoading.value = true
                params.value.pageNum = val
                setTimeout(() => getBookList(), 500)
            }
            const handleRefresh = () => {
                isLoading.value = true
                setTimeout(() => getBookList(), 500)
            }
            const handleSearch = () => {
                isLoading.value = true
                setTimeout(() => getBookList(), 500)
            }
            const logout = () => {
                pajax({
                    url: "../userInfo",
                    method: "POST",
                })
                    .then(res => {
                        if (res.code) {
                            ElMessage.success("退出登录")
                            setTimeout(() => location.href = "../", 500)
                        } else {
                            ElMessage.error(res.msg)
                        }
                    })
            }
            const handleExit = () => {
                logout()
            }
            const reset = () => {
                uploadFiles.value = []
                for (let key of formData.keys()) {
                    formData.delete(key)
                }
                formRef.value.resetFields()
                getBookList()
            }
            const handleSelectionChange = (selection) => {
                ids.value = selection.map(item => item.id)
                single.value = selection.length !== 1
                multiple.value = !selection.length
                singleSelection.value = selection
            }
            const handleAdd = () => {
                reset()
                open.value = true
                title.value = "新增书籍信息"
            }
            const handleEdit = (row) => {
                reset()
                if (row.id) {
                    form.value = row
                } else {
                    form.value = singleSelection.value[0]
                }
                form.value.coverImg && form.value.coverImg !== "" ? uploadFiles.value = [{
                    url: form.value.coverImg,
                    status: "ready"
                }] : ""
                open.value = true
                title.value = "修改书籍信息"
            }
            const cancel = () => {
                open.value = false
                isLoading.value = true
                reset()
            }
            const handleChange = (rawFile, rawFileList) => {
                if (rawFileList.length > 1) {
                    rawFileList.splice(0, 1);
                }
                if (rawFile.raw?.type !== 'image/jpeg' && rawFile.raw?.type !== 'image/png') {
                    ElMessage.error('logo图片格式只能是JPG、PNG')
                    uploadRef.value.clearFiles()
                    return
                } else if (rawFile.raw?.size / 1024 / 1024 > 2) {
                    ElMessage.error('图片大小不能超过2MB!')
                    uploadRef.value.clearFiles()
                    return
                } else {
                    formData.append("files", rawFile.raw)
                }
            }
            const handlePictureCardPreview = (file) => {
                dialogImageUrl.value = file.url
                dialogVisible.value = true
            }
            const submit = () => {
                formRef.value.validate(async (valid, fields) => {
                        if (valid) {
                            if (formData.get("files")) {
                                try {
                                    const res = await pajax({
                                        url: "../upload",
                                        method: "POST",
                                        headers: {
                                            "content-type": "multipart/form-data",
                                        },
                                        data: formData
                                    })
                                    form.value.coverImg = "../" + res.data
                                } catch (e) {
                                    ElMessage.error(e)
                                    console.log(e)
                                }
                            }
                            if (form.value.id) {
                                pajax({
                                    url: "../editBook",
                                    method: "PUT",
                                    data: form.value
                                })
                                    .then(res => {
                                        if (res.code) {
                                            open.value = false;
                                            ElMessage.success("修改成功")
                                            isLoading.value = true
                                            reset()
                                            console.log(form.value)
                                        } else {
                                            ElMessage.error(res.msg)
                                        }
                                    })
                                    .catch(err => {
                                        ElMessage.error(err)
                                        console.log(err)
                                    })
                            } else {
                                pajax({
                                    url: "../addBook",
                                    method: "POST",
                                    data: form.value
                                })
                                    .then(res => {
                                        if (res.code) {
                                            open.value = false;
                                            ElMessage.success("新增成功")
                                            isLoading.value = true
                                            reset()
                                        } else {
                                            ElMessage.error(res.msg)
                                        }
                                    })
                                    .catch(err => {
                                        ElMessage.error(err)
                                        console.log(err)
                                    })
                            }
                        }
                    }
                )
            }
            const handleDelete = (row) => {
                const id = row.id || ids.value
                ElMessageBox.confirm(
                    '确认下架这本/些书吗,该操作不可撤销!',
                    '警告',
                    {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                )
                    .then(() => {
                        pajax({
                            url: "../deleteBook",
                            method: "DELETE",
                            data: {
                                id: id
                            }
                        })
                            .then(res => {
                                if (res.code) {
                                    ElMessage.success("删除成功")
                                    isLoading.value = true
                                    getBookList()
                                } else {
                                    ElMessage.error(res.msg)
                                }
                            })
                            .catch(err => {
                                ElMessage.error(err)
                                console.log(err)
                            })
                    })
                    .catch(() => {
                        ElMessage({type: 'info', message: '取消删除'})
                    })
            }
            const handleTips = () => {
                ElNotification({
                    title: `来自${msg.value}存储的提示信息!`,
                    message: '欢迎您登入系统.左侧菜单有session存储的用户名信息及退出并清除session的退出登录按钮.' +
                        '用cookie存储登录状态，15分钟无操作后再操作会提示登录过期并清除登录状态并返回到登陆页面.' +
                        '若未登录就通过路径方式进入首页会提示非法操作并返回到登陆页面',
                    type: 'success',
                    duration: 8000
                })
            }
            onMounted(() => {
                    open.value = false
                    getBookList()
                    getUserInfo()
                }
            )
            return {
                username,
                msg,
                isLoading,
                open,
                title,
                total,
                params,
                single,
                singleSelection,
                multiple,
                ids,
                form,
                formRef,
                formRules,
                tableData,
                isCollapse,
                uploadRef,
                uploadFiles,
                dialogImageUrl,
                dialogVisible,
                getUserInfo,
                handleLoginTips,
                handleCollapse,
                getBookList,
                handleSizeChange,
                handleCurrentChange,
                handleAdd,
                handleEdit,
                handleChange,
                handlePictureCardPreview,
                submit,
                cancel,
                handleSelectionChange,
                handleDelete,
                handleExit,
                handleTips,
                handleRefresh,
                handleSearch,
                logout
            }
        }
    }
    const app = Vue.createApp(App)
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    })
    app.component("Loading", Loading)
    app.component("Plus", Plus)
    app.component("Edit", Edit)
    app.component("Expand", Expand)
    app.component("Fold", Fold)
    app.component("Delete", Delete)
    app.component("Bell", Bell)
    app.component("Search", Search)
    app.component("Refresh", Refresh)
    app.component("House", House)
    app.mount("#app")
</script>
</body>
</html>